<template>
  <div class="sold">
    <DateAreaPicker />
    <module-item
      moduleName="今日销售情况"
      :chartShow="false"
      :rightShow="false"
    >
      <ul slot="headerRight" class="tabs">
        <li
          @click="switchTab(index)"
          :style="{
            borderRadius: index === 0 ? '13px 0 0 13px' : '0 13px 13px 0',
          }"
          :class="
            index === tabIndex
              ? 'tab_item tab_item--active'
              : 'tab_item tab_item--default'
          "
          v-for="(tab, index) in tabsList"
          :key="index"
        >
          {{ tab.name }}
        </li>
      </ul>
    </module-item>
    <module-item :chartOption="chartOption" moduleName="销售面积"></module-item>
    <module-item :chartOption="chartOption" moduleName="销售额"></module-item>
    <module-item :chartOption="chartOption" moduleName="销售套数"></module-item>
  </div>
</template>

<script>
import DateAreaPicker from "../components/DateAreaPicker";
import ModuleItem from "../components/ModuleItem";

export default {
  name: "Sold",
  components: {
    DateAreaPicker,
    ModuleItem,
  },
  data() {
    ModuleItem;
    return {
      tabIndex: 0,
      tabsList: [
        {
          name: "住宅",
          value: 0,
        },
        {
          name: "商品房",
          value: 1,
        },
      ],
      chartOption: {
        gird: {
          left: 30,
          right: 40,
          bottom: 15,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
        },
        // series:null
        series: [
          // {
          //   type:'bar',
          //   data:[10,20,40,90,5,79,50,80]
          // },
          // {
          //   type:'bar',
          //   data:[30,60,90,90,5,79,50,80]
          // },
          // {
          //   type:'line',
          //   data:[10,50,5,90,5,79,50,80]
          // },
          {
            type: "pie",
            label: {
              show: true,
            },
            data: [
              {
                name: "中国",
                value: 0,
              },
              {
                name: "美国",
                value: 0,
              },
              {
                name: "1",
                value: 0,
              },
              {
                name: "2",
                value: 0,
              },
              {
                name: "4",
                value: 0,
              },
              {
                name: "5",
                value: 0,
              },
            ],
          },
        ],
        // xAxis:{
        //     data:['一月','二月','三月','四月','五月','六月','七月','八月'],
        //     type: 'category',
        // },
        // yAxis:[{name:'单位:人'}],
        // ktLimitShowNum:4
      },
    };
  },
  methods: {
    // 切换Tab
    switchTab(index) {
      this.tabIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../common/styles.scss";
.tabs {
  @include fl();
  .tab_item {
    display: block;
    box-sizing: border-box;
    padding: 6px 14px;
    font-weight: 400;
  }
  .tab_item--default {
    @extend .tab_item;
    background: #f2f5f7;
    @include fc(12px, #595959);
  }
  .tab_item--active {
    @extend .tab_item;
    @include fc(12px, #ffffff);
    background: #0088ff;
  }
}
</style>
